<template>
	<div>
		<seller-tap>
			<span slot='font'>我的关注</span>
			<a href="#/buller/self" class="fa fa-chevron-left" slot='a'></a>
		</seller-tap>
		<a v-for="(item,ins) in follows" :key='ins' :href="'#/buller/seller/'+item.store_id._id+'?type=follow'" >
			<div class="header" style="background-image:url(/static/img/timg.jpg) ;" >
			<div>
				
				<img :src="'http://localhost:2200'+item.store_id.avatar" alt="" />
				<div>
					<span class="wrap">{{item.store_id.nickName}}
					<span>{{item.store_id.describe}}</span></span>
					
					<div>
						<span>粉丝数 {{item.store_id.follows}}</span>
						
					</div>
				</div>
			</div>
		</div>
		</a>
		
		
	</div>
</template>

<script>
	import { mapState, mapGetters } from 'vuex'
	import axios from 'axios'
	import SellerTap from '../components/SellerTap'
	export default{
		data:function(){
			return {
				follows:[]
			}
		},
		components:{
			SellerTap,
		
		},
		computed:{
			...mapState([
				'seller', 'categorys', 'buller'
			]),
		},
		mounted(){
			axios.get('/buller/myFollowed').then((result)=>{
				this.follows = result.data.follows;
			}).catch((err)=>{
				console.log(err);
			})
		}
	}
</script>

<style scoped>
	.header {
		height: 70px;
		background-repeat: no-repeat;
		background-size: 100% 110%;
		position: relative;
		color: #333333;
		margin-bottom: 20px;
		background:#EEEEEE ;
	}
	
	.header>div {
		position: absolute;
		bottom: 0;
		width: 100%;
		left: 0;
		overflow: hidden;
		padding: 5px 10px;
	}
	
	.header>div>img {
		float: left;
		width: 50px;
		height: 50px;
		border-radius: 5%;
		margin-right: 10px;
		position: relative;
		top: -2px;
	}
	
	.header>div>div>div {
		float: right;
	}
	
	.header>div>div>div>span:first-child {
		padding: 2px 7px;
		background: rgba(0, 0, 0, .7);
		border-radius: 5%;
		line-height: 30px;
		font-size: 14px;
	}
	
	.header>div>div>div>span:last-child {
		display: inline-block;
		text-align: center;
		width: 90px;
		background: orangered;
		line-height: 30px;
		border-radius: 10%;
		cursor: pointer;
		font-size: 15px;
		color: white;
	}
	.header>div>div>div>span:last-child i{
		margin-right: 4px;
	}
	.header span.wrap{
		position: relative;
		color: orangered;
	}
	.header span span{
		position: absolute;
		padding: 0;
		margin: 0;
		top: 20px;
		font-size: 12px;
		left: 0;
		width: 190px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		color: #666666;
	}
</style>